<template>
<div class="container">
  <headers title="系统信息" :refresh="isRefresh" path="/home"></headers>
  <div class="content" v-pull-to-refresh="refresh">
    <v-layer></v-layer>
    <div class="list-block media-list no-margin" :class="{margintop5: index > 0}" v-for="(index, news) in news">
      <ul>
        <li>
          <a href="#" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title color-black">
                  {{news.title}}
                </div>
                <div class="item-after">{{news.createDate | formatDate}}</div>
              </div>
              <div class="item-title-row">
                <div class="item-title color-light">
                  {{news.content}}
                </div>
                <div class="item-after"></div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <nav class="bar bar-tab">
    <a class="tab-item" v-link="{path: '/home', replace: true}">
      <span class="icon icon2 home-icon"></span>
      <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" v-link="{path: '/tuijianma', replace: true}">
      <span class="icon icon2 tuijianma-icon"></span>
      <span class="tab-label">推荐码</span>
    </a>
    <a class="tab-item" v-link="{path: '/ucenter', replace: true}">
      <span class="icon icon2 ucenter-icon"></span>
      <span class="tab-label">个人中心</span>
    </a>
  </nav>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'
import VLayer from '../components/PullToRefreshLayer'
import store from '../assets/js/store.min.js'

export default {
  ready () {
    $.init()
    this.getSelfNews()
  },
  data () {
    return {
      news: [],
      isRefresh: false
    }
  },
  methods: {
    getSelfNews () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findAppSysMessages', {
        params: {
          customerId: store('customerId') || 0
        }
      }).then((data) => {
        this.$set('news', data.data)
      })
    },
    refresh () {
      setTimeout(() => {
        this.getSelfNews()
        $.pullToRefreshDone('.pull-to-refresh-content')
      }, 1500)
    }
  },
  filters: {
    formatNewsContent (content) {
      return content.replace(/<[^>]+>/g, '')
    },
    formatDate (timestamp) {
      let date = new Date(timestamp)
      return date.toLocaleDateString().replace(/\//g, '-') + ' ' + date.toTimeString().substr(0, 5)
    }
  },
  components: {
    Headers,
    VLayer
  }
}
</script>
<style scoped>
.list-block .item-title {
  white-space:normal;
}
.list-block.margintop5{margin-top:5px;}
.list-block:last-child{margin-bottom:58px;}
</style>